<template>
  <div class="articlePage">
   <div class="show" v-for = "(article, index) in articles" :key="index">
      <div class="dow title">
       <h4>   <span> {{ article.title }}</span></h4>
      </div>
      <div class="dow desc">
           <span>{{ article.desc }}</span>
      </div>

      <div class="dow content" >
            <span>
            {{ article.content }}
            </span>
      </div>
   
          <img class="phot" src="../../assets/logo.png" alt="">

      

      <div class="more">
        <el-dropdown>
            <el-button class="btn">
             <span style="font-size: 25px;">...</span>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <div @click="clear(article.id,article.userId)">
              <el-dropdown-item>删除</el-dropdown-item>

              </div>
              <div @click="editor()">
                <el-dropdown-item>编辑</el-dropdown-item>
              </div>
            </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div class="footer">
                        <!-- 发布时间 -->
                        <span class="pubTime">{{ "2013年11月22日  "}}</span>
                        <div class="col ">
                            <img src="../../assets/img/点赞 (off).png" alt="">
                            <span class="data">{{ 11 }}</span>
                        </div>
                        <div class="col">
                            <img src="../../assets/img/收藏 (off).png" alt="">
                            <span class="data">{{ 20 }}</span>
                        </div>
                        <div class="col " >
                            <img src="../../assets/img/评论.png" alt="">
                            <span class="data">{{ 30 }}</span>
                        </div>
                   
                </div>

     
   </div>
 

  </div>
</template>

<script >

import {  Message } from 'element-ui';
import instance from '../../utils/request';
  
export default {
 name:"Post",
 data(){
    return{

      articles:[
        {
          id:0,
          title:'java自学经历',
          desc:'自学Java时遇到的问题及学习路径',
          content:`我这个简历没有JVM、JUC之类的内容会不会不太好  2:这个简历再优化后大概能找个什么样的公司？.有实习经历的话必须要写具体干了什么吗？如果是和java无关的也需要写上吗？ `
        },
        {
          id:0,
          title:'jav自学经历',
          desc:'自学Java时遇到的问题及学习路径',
          content:`1:我这个简历没有JVM、JUC之类的内容会不会不太好  2:这个简历再优化后大概能找个什么样的公司？.有实习经历的话必须要写具体干了什么吗？如果是和java无关的也需要写上吗？ `
        },
        {
          id:0,
          title:'java自学经历',
          desc:'自学Java时遇到的问题及学习路径',
          content:`1:我这个简历没有JVM、JUC之类的内容会不会不太好  2:这个简历再优化后大概能找个什么样的公司？.有实习经历的话必须要写具体干了什么吗？如果是和java无关的也需要写上吗？ `
        },
        {
          id:0,
          title:'java自学经历',
          desc:'自学Java时遇到的问题及学习路径',
          content:`我这个简历没有JVM、JUC之类的内容会不会不太好  2:这个简历再优化后大概能找个什么样的公司？.有实习经历的话必须要写具体干了什么吗？如果是和java无关的也需要写上吗？ `
        },
        {
          id:0,
          title:'java自学经历',
          desc:'自学Java时遇到的问题及学习路径',
          content:`1:我这个简历没有JVM、JUC之类的内容会不会不太好  2:这个简历再优化后大概能找个什么样的公司？.有实习经历的话必须要写具体干了什么吗？如果是和java无关的也需要写上吗？ `
        },
        {
          id:0,
          title:'java自学经历',
          desc:'自学Java时遇到的问题及学习路径',
          content:`1:我这个简历没有JVM、JUC之类的内容会不会不太好  2:这个简历再优化后大概能找个什么样的公司？.有实习经历的话必须要写具体干了什么吗？如果是和java无关的也需要写上吗？ `
        },
       
      ],
        
        
    }

 },

 methods:{
  //发送请求（根据article.id）删除文章
 clear(id,userId){

  instance.get('/article/cur_user_list',{
   userId,
   id
  }).then(success=>{
    if(success.data.code==1000)
    this.articles=success.data.data
    Message.success('删除成功')

  }).catch(error=>{
    Message.error('删除失败')
    console.log(error)
  })

 },
 // 编辑 
 editor(){
  this.$router.push({name:'Publish'})
 },


  beforeMount() {
    instance.get('/article/cur_user_list', id=localStorage.getItem('id') )
    .then(success=>{
      if(success.data.code==1000){
        this.articles=success.data.data
      }else{
             Message.error("板块数据获取错误，请稍后重试");
             console.log(success.data);
            }
    }).catch(error=>{
      Message.error('模板数据获取异常，请稍后重试');
                console.log(error);

    })


  },

 }
}
</script>
<style src="../../assets/style/post.css"
  scoped>
</style>
